<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import {addSysMenu, getSysMenu, listSysMenu, updateSysMenu} from "@/api/system/menu";
import {cloneDeep} from "lodash";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['success']);
const modalRef = ref();
const formRef = ref();
const formData = ref({
  menuId: undefined,
  menuName: '',
  parentId: 0,
  orderNum: 0,
  path: '',
  component: '',
  routeName: '',
  menuType: 'M',
  visible: 0,
  status: 0,
  perms: '',
  icon: '',
})
const rules = reactive({
  menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
  orderNum: [{required: true, message: '请输入排序', trigger: 'blur'}],
  perms: [{required: true, message: '请输入权限字符', trigger: 'blur'}],
})
const menuTree = ref([])
const iconListRef = ref()
const formType = ref('create')


const open = async (id, type = 'create') => {
  formType.value = type;
  resetForm();
  if (type === 'create') {
    formData.value.parentId = id ? id : 0;
  } else {
    const {data} = await getSysMenu(id);
    formData.value = {
      ...data
    }
  }
  modalRef.value.handleOpen()
  await getTree();
}

const getTree = async () => {
  menuTree.value = []
  const {data} = await listSysMenu();
  let menu = {menuId: 0, title: '根目录', children: []}
  menu.children = data;
  menuTree.value.push(menu)
}

const handleSubmit = async () => {
  await formRef.value.validate();
  let data = cloneDeep(formData.value);
  data.routeName = data.path
  if (data.menuId === undefined) {
    await addSysMenu(data);
    proxy.$modal.okNotify('新增成功');
  } else {
    await updateSysMenu(data);
    proxy.$modal.okNotify('修改成功');
  }
  resetForm();
  modalRef.value.handleClose();
  emit('success')
}

const resetForm = () => {
  formRef.value?.resetFields();
  formData.value = {
    menuId: undefined,
    menuName: '',
    parentId: 0,
    orderNum: 0,
    path: '',
    component: '',
    routeName: '',
    menuType: 'M',
    visible: 0,
    status: 0,
    perms: '',
    icon: '',
  }
}

defineExpose({open})
</script>

<template>
  <dialog-form ref="modalRef" :modalTitle="`${formType === 'create' ? '新建' : '编辑'}菜单`" modalWidth="900px"
               @submit="handleSubmit">
    <a-form ref="formRef" :model="formData" :rules="rules">
      <a-form-item label="上级菜单" name="parentId">
        <a-tree-select
            v-model:value="formData.parentId"
            :tree-data="menuTree"
            :field-names="{
              label:'title',
              value:'menuId'
            }"
            placeholder="请选择上级菜单"
        />
      </a-form-item>
      <a-row :gutter="4" justify="start">
        <a-col :span="8">
          <a-form-item label="菜单类型">
            <a-radio-group v-model:value="formData.menuType" button-style="solid">
              <a-radio-button value="M">目录</a-radio-button>
              <a-radio-button value="C">菜单</a-radio-button>
              <a-radio-button value="F">接口</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="显示状态">
            <a-radio-group v-model:value="formData.visible" button-style="solid">
              <a-radio-button :value="0">显示</a-radio-button>
              <a-radio-button :value="1">隐藏</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="菜单状态">
            <a-radio-group v-model:value="formData.status" button-style="solid">
              <a-radio-button :value="0">正常</a-radio-button>
              <a-radio-button :value="1">停用</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="4" justify="space-between">
        <a-col :span="10">
          <a-form-item label="菜单名称" name="menuName">
            <a-input v-model:value="formData.menuName" placeholder="请输入菜单名称"/>
          </a-form-item>
          <a-form-item label="菜单排序" name="orderNum">
            <a-input-number v-model:value="formData.orderNum" :precision="0"/>
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item v-if="formData.menuType !== 'F'" label="菜单图标">
            <icon-select ref="iconListRef" v-model="formData.icon"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="4" justify="start">
        <a-col :span="8" v-if="formData.menuType !== 'F'">
          <a-form-item name="path">
            <template #label>
              <div class="flex items-center">
                <a-tooltip
                    placement="top"
                >
                  <template #title>访问的路由地址，如：'user'。切记不需要加'/'!</template>
                  <icon icon="ep:info-filled" class="mr-1 cursor-pointer" size="16px" color="#333"/>
                </a-tooltip>
                路由地址
              </div>
            </template>
            <template #default>
              <a-input v-model:value="formData.path" placeholder="请输入路由地址"/>
            </template>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="formData.menuType === 'C'">
          <a-form-item name="component">
            <template #label>
              <div class="flex items-center">
                <a-tooltip
                    placement="top"
                >
                  <template #title>访问的组件路径，如：'system/user/index'。切记是从src层开始向下寻找</template>
                  <icon icon="ep:info-filled" class="mr-1 cursor-pointer" size="16px" color="#333"/>
                </a-tooltip>
                组件路径
              </div>
            </template>
            <a-input v-model:value="formData.component" placeholder="请输入组件地址"/>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="formData.menuType === 'F'">
          <a-form-item name="perms">
            <template #label>
              <div class="flex items-center">
                <a-tooltip
                    placement="top"
                >
                  <template #title>Controller 方法上的权限字符，如：system:user:list</template>
                  <icon icon="ep:info-filled" class="mr-1 cursor-pointer" size="16px" color="#333"/>
                </a-tooltip>
                权限字符
              </div>
            </template>
            <a-input v-model:value="formData.perms" placeholder="请输入权限字符"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </dialog-form>
</template>

<style scoped lang="scss">

</style>
